<template>
  <div class="w-full filter-from p-5 pb-0">
    <div class="grid grid-cols-3 gap-1">
      <div v-for="(item, index) in filterFromDataList" :key="index" class="flex items-center justify-between">
        <el-form-item :label="item.name + '：'" class="w-4/5">
          <h-input v-if="item.searchProps.component === 'Input'" v-model="item.value" :placeholder="`请输入${item.name}`"
            :clearable="true" />
          <h-select v-model="item.value" :placeholder="`请选择${item.name}`" v-else
            :options="item.searchProps.props.options"></h-select>
        </el-form-item>
      </div>
    </div>
    <div class="flex justify-end">
      <h-button plain @click="reset">重置</h-button>
      <h-button @click='search'>筛选</h-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type PropType, watch, ref } from 'vue'
const props = defineProps({
  list: {
    type: Array as PropType<HTABLE.FilterFromDataList[]>,
    default: () => []
  }
})
const emits = defineEmits(['handleFilter'])
const filterFromDataList = ref<Array<HTABLE.FilterFromDataList>>([])
watch(
  () => props.list,
  (val) => {
    filterFromDataList.value = val
  },
  { immediate: true }
)
const reset = () => {
  filterFromDataList.value.forEach(item => {
    item.value = ''
  })
  emits('handleFilter')
}
const search = () => {
  emits('handleFilter')
}
</script>
<style lang="less" scoped>
.filter-from {
  background-color: var(--head-tab-bg-color);
}

:deep(.el-form-item__label) {
  color: var(--main-text-color);
}
</style>